<template>
  <div class="footer-bar">
    <button class="left-btn" @click="workflowClick">工作流程实时状态</button>
    <button class="right-btn" @click="warnClick">报警实时状态</button>
  </div>
</template>
<script setup lang="ts">
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const warnClick = (): void => {
    
    router.push('/warn-status')
  }
  const workflowClick = (): void => {
    router.push('/workflow-status')
  }
</script>
<style scoped>
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 0 24px;
}
.left-btn {
  background: #2b4a6f;
  color: #fff;
  border: none;
  border-radius: 8px 8px 0 0;
  font-size: 18px;
  padding: 12px 32px;
  flex: 1;
  margin-right: 8px;
  cursor: pointer;
}
.right-btn {
  background: #d32f2f;
  color: #fff;
  border: none;
  border-radius: 8px 8px 0 0;
  font-size: 18px;
  padding: 12px 32px;
  flex: 1;
  margin-left: 8px;
  cursor: pointer;
}
</style>
